<template>
  <div class="dashboard-container" style="display: flex;margin:0;padding:30px">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div style="width: 70%">
      <el-row :gutter="40">
        <el-col :span="8" style="">
          <div class="column">
            <div class="content">
              <img class="imgA" src="../../../src/assets/person2.png" />
              <img class="imgB" src="../../../src/assets/person.png" />
              <div>
                <div class="text">用户总数</div>
                <div>{{ allData.totalUserNumber }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="">
          <div class="column">
            <div class="content">
              <img class="imgA" src="../../../src/assets/is_seat2.png" />
              <img class="imgB" src="../../../src/assets/is_seat.png" />
              <div>
                <div class="text">未预约座位数</div>
                <div>{{ allData.status1SeatList }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="">
          <div class="column">
            <div class="content">
              <img class="imgA" src="../../../src/assets/no_seat2.png" />
              <img class="imgB" src="../../../src/assets/no_seat.png" />
              <div>
                <div class="text">已预约座位数</div>
                <div>{{ allData.status0SeatList }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="chartData.rows.length>0" style="margin-top:80px"> 
        <el-col>
          <ve-line
            :data="chartData"
            :settings="chartSettings"
            :grid="grid"
            :extend="chartExtendRound"
          ></ve-line>
        </el-col>
      </el-row>
    </div>
    <div v-if="userInfo.type==='0'" class="right">
      <div class="card">
        <div style="font-size:25px;font-weight:600;margin:20px auto 0 auto">预 约 打 卡</div>
        <img class="isreserve" src="../../../src/assets/reserve.png" @click="reserved" />
        <div v-if="isReserve" class="cardContent">
          <div><i class="el-icon-user" /> 预约账号：{{isReserve.accountNumber}}</div>
          <div><i class="el-icon-user-solid" /> 预约人姓名：{{isReserve.userName}}</div>
          <div><i class="el-icon-c-scale-to-original" /> 预约状态：{{isReserve.status==='0'?'已预约':'已开始'}}</div>
          <div><i class="el-icon-date" /> 预约开始时间：{{isReserve.reserveStartDate}}</div>
          <div><i class="el-icon-date" /> 预约结束时间：{{isReserve.reserveEndDate}}</div>
          <div><i class="el-icon-timer" /> 是否打卡：{{isReserve.isPunchClock==='0'?'未打卡':'已打卡'}}</div>
          <div><i class="el-icon-alarm-clock" /> 打卡时间：{{isReserve.punchClockDate}}</div>
        </div>
        <div v-else style="margin-top:20px">暂时没有已开始或预约中的数据</div>
      </div>
    </div>
    <!-- <div v-else>管理员界面</div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import webservice from "@/utils/webservice";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    this.chartSettings = {
      labelMap: {
        date: "日期",
        irNum: "违规数量",
        rrNum: "预约数量",
      },
    };
    return {
      userInfo: {},
      allData: {},
      chartData: {
        columns: ["date", "irNum", "rrNum"],
        rows: [],
      },
      chartExtendRound: {
        xAxis: {
          name: "日期",
          nameLocation: "end",
        },
      },
      grid: "",
      isStart:{},//已经开始的预约
      isReserve:{},//已预约的
    };
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (!this.userInfo) {
      this.$router.push("/login");
    }
    this.getData();
    this.grid = { right: 80 };
    this.recordIsStart()
  },
  methods: {
    //获取首页数据
    getData() {
      webservice.HttpPost("/api/seat/indexStatistics", "", (data) => {
        if (data.code === 200) {
          this.allData = data.data;
          this.chartData.rows = data.data.recordList;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //查询已开始预约记录
    recordIsStart(){
      this.isReserve = {}
      const params = {
        userId:this.userInfo.id,
        status:'2'
      }
      const _params = JSON.stringify(params);
      webservice.HttpPost("/api/reserveRecord/selectReserveRecordList",_params , (data) => {
        if (data.code === 200) {
          this.isReserve = data.data[0]
          if(!this.isReserve){
            this.recordIsReserve()
          }
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //已预约的
    recordIsReserve(){
      const params = {
        userId:this.userInfo.id,
        status:'0'
      }
      const _params = JSON.stringify(params);
      webservice.HttpPost("/api/reserveRecord/selectReserveRecordList",_params , (data) => {
        if (data.code === 200) {
          this.isReserve = data.data[0]
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //打卡
    reserved(){
      if(this.isReserve){
        const params = {
          id:this.isReserve.id
        }
        const _params = JSON.stringify(params);
        webservice.HttpPost("/api/reserveRecord/punchClock",_params , (data) => {
        if (data.code === 200) {
          this.$message.success({
            message: '打卡成功！',
            showClose: true,
            duration: 5000,
          });
          this.recordIsStart()
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 5000,
          });
        }
      });
      }else{
        this.$message({
            message: '暂时没有预约需要打卡！',
            showClose: true,
            duration: 5000,
          });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container{
  height: 100%;
  width: 100%;
  background: url(../../assets/bg.jpg);
}
.column {
  display: flex;
  height: 100px;
  // margin-right: 10px;
  background-color: rgb(52, 67, 92);
  align-items: center;
  justify-content: center;
}
.column:hover{
  box-shadow: 0px 0px 9px 5px #888888;
}
.content {
  width: 76%;
  height: 50%;
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
img {
  width: 50px;
  height: 50px;
}
.content:hover .imgA {
  opacity: 1;
}
.content:hover .imgB {
  opacity: 0;
}
.imgA {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.imgB {
  transition: opacity 0.5s;
}
.text {
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 400;
}
.right{
  margin-left: 30px;
  border: 1px solid rgb(228, 227, 227);
  width: 30%;
}
.card{
  width: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}
.isreserve{
  width: 60px;
  height: 60px;
  margin: 20px auto 0 auto;
}
.cardContent{
  margin-top: 30px;
}
.cardContent div{
  margin-bottom: 20px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
